<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为云IoT平台 - 设备监控</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #0070f3;
            --primary-dark: #0051bf;
            --secondary: #6c757d;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --bg-color: #f5f8fa;
            --card-bg: #ffffff;
            --border-color: #dee2e6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: var(--bg-color);
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 2.2rem;
            margin-bottom: 8px;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--card-bg);
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            flex-wrap: wrap;
            gap: 15px;
        }

        .status-bar > div {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-bar label {
            font-weight: 500;
            color: var(--dark);
        }

        .status-bar select {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid var(--border-color);
            background-color: var(--light);
            font-size: 1rem;
            min-width: 220px;
        }

        .last-update {
            background-color: var(--light);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 5px 15px;
            background-color: var(--light);
            border-radius: 20px;
            font-weight: 500;
        }

        .user-info i {
            font-size: 1.2rem;
        }

        .panel {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }

        .panel-header {
            font-size: 1.5rem;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--dark);
        }

        .panel-controls {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .refresh-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .refresh-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
        }

        .time-range {
            display: flex;
            gap: 8px;
        }

        .time-btn {
            padding: 6px 12px;
            background-color: var(--light);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .time-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .device-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .info-card {
            background: var(--light);
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid var(--primary);
        }

        .info-card h3 {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 8px;
        }

        .info-card p {
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--dark);
        }

        .info-card .status {
            font-weight: 500;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.85rem;
            display: inline-block;
            margin-top: 8px;
        }

        .info-card .status.online {
            background-color: rgba(40, 167, 69, 0.15);
            color: var(--success);
        }

        .info-card .status.offline {
            background-color: rgba(220, 53, 69, 0.15);
            color: var(--danger);
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .chart-panel {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .chart-header h3 {
            font-size: 1.2rem;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chart-container {
            height: 300px;
            position: relative;
        }

        .overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .overview-item {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
            transition: transform 0.3s;
        }

        .overview-item:hover {
            transform: translateY(-5px);
        }

        .overview-item h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: var(--gray);
        }

        .overview-item .value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--dark);
        }

        .progress-bar {
            height: 10px;
            background: var(--light-gray);
            border-radius: 5px;
            overflow: hidden;
            margin: 15px 0;
        }

        .progress {
            height: 100%;
            border-radius: 5px;
        }

        .range-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--gray);
        }

        .status-info {
            font-size: 0.9rem;
            font-weight: 500;
            margin-top: 5px;
        }

        .footer {
            text-align: center;
            padding: 25px 0;
            color: var(--gray);
            font-size: 0.9rem;
            border-top: 1px solid var(--border-color);
            margin-top: 20px;
        }

        .footer .update-info {
            margin-top: 10px;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .charts-container {
                grid-template-columns: 1fr;
            }

            .status-bar {
                flex-direction: column;
                align-items: flex-start;
            }

            .panel-controls {
                flex-wrap: wrap;
            }
        }

        /* Sensor color codes */
        .temp-progress { background: linear-gradient(90deg, #3498db, #e74c3c); }
        .hum-progress { background: linear-gradient(90deg, #3498db, #2ecc71); }
        .light-progress { background: linear-gradient(90deg, #f39c12, #f1c40f); }
        .soil-progress { background: linear-gradient(90deg, #8e44ad, #9b59b6); }
        .ph-progress { background: linear-gradient(90deg, #1abc9c, #16a085); }
        .uv-progress { background: linear-gradient(90deg, #9b59b6, #8e44ad); }
        .rain-progress { background: linear-gradient(90deg, #3498db, #2980b9); }

        .status-ok { color: var(--success); }
        .status-warning { color: var(--warning); }
        .status-error { color: var(--danger); }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>华为云IoT平台</h1>
            <p>智能设备监控与数据分析系统</p>
        </div>

        <div class="status-bar">
            <div>
                <label for="device_select"><i class="fas fa-microchip"></i> 选择设备：</label>
                <select id="device_select">
                    <option value="">-- 请选择设备 --</option>
                </select>
            </div>
            <div>
                <i class="fas fa-sync-alt"></i> 最后更新: <span id="last-update" class="last-update">--:--:--</span>
            </div>
            <div class="user-info">
                <i class="fas fa-user-cog"></i> <span>管理员</span>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <span>设备监控面板</span>
                <div class="panel-controls">
                    <span>刷新频率: <strong>5秒</strong></span>
                    <button class="refresh-btn" onclick="refreshData()">
                        <i class="fas fa-sync"></i> 立即刷新
                    </button>
                </div>
            </div>

            <div class="device-info">
                <div class="info-card">
                    <h3>设备ID</h3>
                    <p id="device-id">1</p>
                </div>

                <div class="info-card">
                    <h3>设备状态</h3>
                    <p>在线</p>
                    <span class="status online">正常运行</span>
                </div>

                <div class="info-card">
                    <h3>协议类型</h3>
                    <p id="protocol">MQTT</p>
                </div>

                <div class="info-card">
                    <h3>服务器</h3>
                    <p id="server">iot.huaweicloud.com</p>
                </div>

                <div class="info-card">
                    <h3>连接时间</h3>
                    <p id="connection-time">24小时</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <span>传感器数据分析</span>
                <div class="panel-controls">
                    <div class="time-range">
                        <button class="time-btn active" onclick="loadCharts('1h')">1小时</button>
                        <button class="time-btn" onclick="loadCharts('24h')">24小时</button>
                        <button class="time-btn" onclick="loadCharts('7d')">7天</button>
                    </div>
                </div>
            </div>

            <div class="charts-container">
                <div class="chart-panel">
                    <div class="chart-header">
                        <h3><i class="fas fa-thermometer-half" style="color: #e74c3c;"></i> 温度与湿度趋势</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="tempHumChart"></canvas>
                    </div>
                </div>

                <div class="chart-panel">
                    <div class="chart-header">
                        <h3><i class="fas fa-sun" style="color: #f39c12;"></i> 光照与紫外线强度</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="lightUvChart"></canvas>
                    </div>
                </div>

                <div class="chart-panel">
                    <div class="chart-header">
                        <h3><i class="fas fa-seedling" style="color: #27ae60;"></i> 土壤湿度与pH值</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="soilPhChart"></canvas>
                    </div>
                </div>

                <div class="chart-panel">
                    <div class="chart-header">
                        <h3><i class="fas fa-cloud-rain" style="color: #3498db;"></i> 降雨量数据</h3>
                    </div>
                    <div class="chart-container">
                        <canvas id="rainChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <span>实时设备状态概览</span>
            </div>

            <div class="overview">
                <div class="overview-item">
                    <h3><i class="fas fa-thermometer-half"></i> 温度</h3>
                    <div class="value"><span id="temperature">23</span> °C</div>
                    <div class="progress-bar">
                        <div class="progress temp-progress" id="temp-progress" style="width: 46%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0°C</span>
                        <span>50°C</span>
                    </div>
                    <div class="status-info status-ok">正常范围</div>
                </div>

                <div class="overview-item">
                    <h3><i class="fas fa-tint"></i> 湿度</h3>
                    <div class="value"><span id="humidity">65</span> %</div>
                    <div class="progress-bar">
                        <div class="progress hum-progress" id="hum-progress" style="width: 65%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0%</span>
                        <span>100%</span>
                    </div>
                    <div class="status-info status-ok">适宜</div>
                </div>

                <div class="overview-item">
                    <h3><i class="fas fa-lightbulb"></i> 光照</h3>
                    <div class="value"><span id="light">1850</span> lx</div>
                    <div class="progress-bar">
                        <div class="progress light-progress" id="light-progress" style="width: 61.67%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0 lx</span>
                        <span>3000 lx</span>
                    </div>
                    <div class="status-info status-ok">中等光照</div>
                </div>

                <div class="overview-item">
                    <h3><i class="fas fa-seedling"></i> 土壤湿度</h3>
                    <div class="value"><span id="soil">45</span> %</div>
                    <div class="progress-bar">
                        <div class="progress soil-progress" id="soil-progress" style="width: 45%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0%</span>
                        <span>100%</span>
                    </div>
                    <div class="status-info status-warning">需要浇水</div>
                </div>

                <div class="overview-item">
                    <h3><i class="fas fa-flask"></i> 土壤pH值</h3>
                    <div class="value"><span id="ph">6.8</span></div>
                    <div class="progress-bar">
                        <div class="progress ph-progress" id="ph-progress" style="width: 48.57%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0</span>
                        <span>14</span>
                    </div>
                    <div class="status-info status-ok">中性</div>
                </div>

                <div class="overview-item">
                    <h3><i class="fas fa-sun"></i> 紫外线指数</h3>
                    <div class="value"><span id="uv">3.2</span></div>
                    <div class="progress-bar">
                        <div class="progress uv-progress" id="uv-progress" style="width: 32%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0</span>
                        <span>10</span>
                    </div>
                    <div class="status-info status-ok">中等</div>
                </div>

                <div class="overview-item">
                    <h3><i class="fas fa-cloud-rain"></i> 降雨量</h3>
                    <div class="value"><span id="rain">2.4</span> mm</div>
                    <div class="progress-bar">
                        <div class="progress rain-progress" id="rain-progress" style="width: 24%;"></div>
                    </div>
                    <div class="range-info">
                        <span>0 mm</span>
                        <span>10 mm</span>
                    </div>
                    <div class="status-info">最近24小时</div>
                </div>
            </div>
        </div>

        <div class="footer">
            华为云IoT平台 © 2023 - 智能设备监控系统
            <div class="update-info">
                数据更新时间: 每5秒 | 最后刷新: <span id="footer-last-update">--:--:--</span>
            </div>
        </div>
    </div>

    <script>
        // 图表实例
        let tempHumChart = null;
        let lightUvChart = null;
        let soilPhChart = null;
        let rainChart = null;
        let selectedDeviceId = '1';
        let currentRange = '24h';

        // 更新最后更新时间
        function updateLastUpdateTime() {
            const now = new Date();
            const timeStr = now.toTimeString().split(' ')[0];
            $('#last-update').text(timeStr);
            $('#footer-last-update').text(timeStr);
        }

        // 设置时间范围按钮激活状态
        function setActiveTimeButton(range) {
            $('.time-btn').removeClass('active');
            $(`.time-btn:contains(${range === '1h' ? '1小时' : range === '24h' ? '24小时' : '7天'})`).addClass('active');
        }

        // 加载设备数据
        function refreshData() {
            $.ajax({
                url: '/api/device/info',
                data: { device_id: selectedDeviceId },
                success: function(data) {
                    // 更新概览数据
                    $('#temperature').text(data.temperature || '--');
                    $('#humidity').text(data.humidity || '--');
                    $('#light').text(data.light || '--');
                    $('#soil').text(data.soil || '--');
                    $('#ph').text(data.ph || '--');
                    $('#uv').text(data.uv || '--');
                    $('#rain').text(data.rain || '--');

                    // 更新进度条
                    $('#temp-progress').css('width', `${(data.temperature / 50) * 100}%`);
                    $('#hum-progress').css('width', `${data.humidity}%`);
                    $('#light-progress').css('width', `${(data.light / 3000) * 100}%`);
                    $('#soil-progress').css('width', `${data.soil}%`);
                    $('#ph-progress').css('width', `${(data.ph / 14) * 100}%`);
                    $('#uv-progress').css('width', `${(data.uv / 10) * 100}%`);
                    $('#rain-progress').css('width', `${(data.rain / 10) * 100}%`);

                    updateLastUpdateTime();
                },
                error: function(xhr, status, error) {
                    console.error('获取设备状态失败:', status, error);
                }
            });
        }

        // 加载图表数据
        function loadCharts(range) {
            currentRange = range;
            setActiveTimeButton(range);

            $.ajax({
                url: '/api/device/history',
                data: {
                    device_id: selectedDeviceId,
                    range: range
                },
                success: function(data) {
                    // 销毁旧图表实例
                    if (tempHumChart) tempHumChart.destroy();
                    if (lightUvChart) lightUvChart.destroy();
                    if (soilPhChart) soilPhChart.destroy();
                    if (rainChart) rainChart.destroy();

                    // 创建温度/湿度图表
                    const tempHumCtx = document.getElementById('tempHumChart').getContext('2d');
                    tempHumChart = new Chart(tempHumCtx, {
                        type: 'line',
                        data: {
                            labels: data.timestamps,
                            datasets: [
                                {
                                    label: '温度 (°C)',
                                    data: data.temperature,
                                    borderColor: '#e74c3c',
                                    backgroundColor: 'rgba(231, 76, 60, 0.1)',
                                    borderWidth: 2,
                                    tension: 0.3,
                                    fill: true
                                },
                                {
                                    label: '湿度 (%)',
                                    data: data.humidity,
                                    borderColor: '#3498db',
                                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
                                    borderWidth: 2,
                                    tension: 0.3,
                                    fill: true
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                },
                                title: {
                                    display: false
                                }
                            },
                            scales: {
                                x: {
                                    grid: {
                                        display: false
                                    }
                                },
                                y: {
                                    beginAtZero: true,
                                    grid: {
                                        color: 'rgba(0, 0, 0, 0.05)'
                                    }
                                }
                            }
                        }
                    });

                    // 创建光照/紫外线图表
                    const lightUvCtx = document.getElementById('lightUvChart').getContext('2d');
                    lightUvChart = new Chart(lightUvCtx, {
                        type: 'line',
                        data: {
                            labels: data.timestamps,
                            datasets: [
                                {
                                    label: '光照 (lx)',
                                    data: data.light,
                                    borderColor: '#f39c12',
                                    backgroundColor: 'rgba(243, 156, 18, 0.1)',
                                    borderWidth: 2,
                                    tension: 0.3,
                                    fill: true
                                },
                                {
                                    label: '紫外线指数',
                                    data: data.uv,
                                    borderColor: '#9b59b6',
                                    backgroundColor: 'rgba(155, 89, 182, 0.1)',
                                    borderWidth: 2,
                                    tension: 0.3,
                                    fill: true,
                                    yAxisID: 'y1'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                x: {
                                    grid: {
                                        display: false
                                    }
                                },
                                y: {
                                    type: 'linear',
                                    display: true,
                                    position: 'left',
                                    title: {
                                        display: true,
                                        text: '光照 (lx)'
                                    },
                                    grid: {
                                        color: 'rgba(0, 0, 0, 0.05)'
                                    }
                                },
                                y1: {
                                    type: 'linear',
                                    display: true,
                                    position: 'right',
                                    title: {
                                        display: true,
                                        text: '紫外线指数'
                                    },
                                    grid: {
                                        drawOnChartArea: false,
                                    },
                                }
                            }
                        }
                    });

                    // 创建土壤湿度/pH值图表
                    const soilPhCtx = document.getElementById('soilPhChart').getContext('2d');
                    soilPhChart = new Chart(soilPhCtx, {
                        type: 'line',
                        data: {
                            labels: data.timestamps,
                            datasets: [
                                {
                                    label: '土壤湿度 (%)',
                                    data: data.soil,
                                    borderColor: '#8e44ad',
                                    backgroundColor: 'rgba(142, 68, 173, 0.1)',
                                    borderWidth: 2,
                                    tension: 0.3,
                                    fill: true
                                },
                                {
                                    label: 'pH值',
                                    data: data.ph,
                                    borderColor: '#1abc9c',
                                    backgroundColor: 'rgba(26, 188, 156, 0.1)',
                                    borderWidth: 2,
                                    tension: 0.3,
                                    fill: true,
                                    yAxisID: 'y1'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                x: {
                                    grid: {
                                        display: false
                                    }
                                },
                                y: {
                                    title: {
                                        display: true,
                                        text: '土壤湿度 (%)'
                                    },
                                    min: 0,
                                    max: 100,
                                    grid: {
                                        color: 'rgba(0, 0, 0, 0.05)'
                                    }
                                },
                                y1: {
                                    position: 'right',
                                    title: {
                                        display: true,
                                        text: 'pH值'
                                    },
                                    min: 0,
                                    max: 14,
                                    grid: {
                                        drawOnChartArea: false,
                                    },
                                }
                            }
                        }
                    });

                    // 创建降雨量图表
                    const rainCtx = document.getElementById('rainChart').getContext('2d');
                    rainChart = new Chart(rainCtx, {
                        type: 'bar',
                        data: {
                            labels: data.timestamps,
                            datasets: [
                                {
                                    label: '降雨量 (mm)',
                                    data: data.rain,
                                    backgroundColor: 'rgba(52, 152, 219, 0.7)',
                                    borderColor: 'rgba(52, 152, 219, 1)',
                                    borderWidth: 1
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                x: {
                                    grid: {
                                        display: false
                                    }
                                },
                                y: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: '降雨量 (mm)'
                                    },
                                    grid: {
                                        color: 'rgba(0, 0, 0, 0.05)'
                                    }
                                }
                            }
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载图表数据失败:', status, error);
                    alert('无法加载图表数据');
                }
            });
        }

        function loadDevices() {
            $.ajax({
                url: '/api/device/list',
                success: function(data) {
                    const select = $('#device_select');
                    select.empty();
                    select.append('<option value="">-- 请选择设备 --</option>');
                    data.devices.forEach(device => {
                        select.append(`<option value="${device.id}">${device.id}</option>`);
                    });
                    if (selectedDeviceId) {
                        select.val(selectedDeviceId);
                    }
                    refreshData();
                },
                error: function(xhr, status, error) {
                    console.error('加载设备列表失败:', status, error);
                    alert('无法加载设备列表');
                }
            });
        }

        // 页面加载时初始化
        $(document).ready(function() {
            loadDevices();
            // 初始化更新时间
            updateLastUpdateTime();

            // 加载初始数据
            refreshData();

            // 加载图表
            loadCharts('1h');

            // 设置定时刷新
            setInterval(refreshData, 5000);

            // 设备选择事件
            $('#device_select').on('change', function() {
                selectedDeviceId = $(this).val();
                refreshData();
                loadCharts(currentRange);
            });
        });
    </script>
</body>
</html>